Vue.component('Codemirror', {
    props: {
        value: {
            type: String,
            required: true
        },
        height: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            editor: false
        }
    },
    watch: {
        value(value) {
            const editorValue = this.editor.getValue()
            if (value !== editorValue) {
                this.editor.setValue(this.value)
            }
        },
        height(value) {
            this.editor.setSize('auto', this.height)
        }
    },
    mounted() {
        this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
            mode: 'text/x-java',
            lineNumbers: true,
            lint: true,
            lineWrapping: true,
            tabSize: 2,
            cursorHeight: 0.9,
            // 替换主题这里需修改名称
            theme: 'idea',
            readOnly: true
        })
        this.editor.setSize('auto', this.height)
        this.editor.setValue(this.value)
    },
    methods: {
        getValue() {
            return this.editor.getValue()
        }
    },
    template: `<div><textarea ref="textarea" /></div>`
});
